<template>
  <BaseCard title="API渠道成功率">
    <BaseTable :loading="loading" :columns="columns" :dataSource="dataSource" :pagination="false">
      <template slot="applySuccessPercent" slot-scope="{ record }">
        <a-progress :percent="record.applySuccessPercent" strokeColor="#1890ff" />
      </template>
    </BaseTable>
  </BaseCard>
</template>

<script>
import * as Ajax from '@/api/dashboard';
export default {
  data() {
    return {
      loading: true,
      columns: [
         {
          dataIndex: 'clickNum',
          title: '撞库数量',
          ellipsis: true,
          customRender: (text) => text === 0 ? 0 : (text || '/'),
        },
        {
          dataIndex: 'channelName',
          title: '渠道名称',
          ellipsis: true,
          customRender: (text) => text || '/',
        },
        {
          dataIndex: 'collisionNum',
          title: '撞库成功量',
          ellipsis: true,
          customRender: (text) => text === 0 ? 0 : (text || '/'),
        },
        {
          dataIndex: 'applyReqNum',
          title: '进件量',
          ellipsis: true,
          customRender: (text) => text === 0 ? 0 : (text || '/'),
        },
        {
          dataIndex: 'applyNum',
          title: '进件成功量',
          ellipsis: true,
          customRender: (text) => text === 0 ? 0 : (text || '/'),
        },
        {
          dataIndex: 'applySuccessPercent',
          title: '成功率',
          // width: '150px',
          ellipsis: true,
          scopedSlots: { customRender: 'applySuccessPercent' },
        },
      ],
      dataSource: [],
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData(time) {
      this.loading = true;
      Ajax.getChannelTop(time).then(({ success, data }) => {
        if (success) {
          this.dataSource = Array.isArray(data) ? data : [];
        }
      }).finally(() => {
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
:deep(.ant-progress-text) {
  font-size: 12px;
}
</style>
